import {
    ProFormDateTimePicker,
    ProFormRadio,
    ProFormSelect,
    ProFormText,
    ProFormTextArea,
    StepsForm,
    ProFormInstance,
} from '@ant-design/pro-components';
import {message, Modal} from 'antd';
import React, {useState} from 'react';
import type {UserListItem} from '../data';
import {addUser, authorityList, userSelectList} from "@/pages/organization/user-list/service";
import {organizationSelectList} from "@/pages/organization/org-list/service";
import {useAccess} from "@@/exports";
import { useRef } from 'react';

export type FormValueType = {
    target?: string;
    template?: string;
    type?: string;
    time?: string;
    frequency?: string;
} & Partial<UserListItem>;

export type AddFormProps = {
    onCancel: (flag?: boolean, formVals?: FormValueType) => void;
    onSubmit: (values: FormValueType) => Promise<void>;
    createModalVisible: boolean;
    values: Partial<UserListItem>;
};

const AddForm: React.FC<AddFormProps> = (props) => {
    const access = useAccess();
    const formRef = useRef<ProFormInstance>();
    const handleStepChange = async (currentStep: number) => {
        if (currentStep === 0) {
            // 获取第一步的表单数据
            const firstStepValues = await formRef.current?.getFieldsValue();
            // 更新第二步的初始值
            formRef.current?.setFieldsValue({
                homePath: firstStepValues?.account,
            });
        }
    };

    return (
        <StepsForm
            formRef={formRef}
            stepsProps={{
                size: 'small',
            }}
            onCurrentChange={handleStepChange}
            stepsFormRender={(dom, submitter) => {
                return (
                    <Modal
                        width={640}
                        bodyStyle={{
                            padding: '32px 40px 48px',
                        }}
                        destroyOnClose
                        title="添加用户"
                        open={props.createModalVisible}
                        footer={submitter}
                        onCancel={() => {
                            props.onCancel();
                        }}
                    >
                        {dom}
                    </Modal>
                );
            }}
            onFinish={props.onSubmit}
        >
            <StepsForm.StepForm
                initialValues={{}}
                title="基本信息"
            >
                <ProFormSelect
                    label="所属组织"
                    name="organizationId"
                    style={{width: 200}}
                    request={async () => {
                        const res = await organizationSelectList({includeSystem:true});
                        return res.data.map((item) => ({
                            label: item.name,
                            value: item.organizationId,
                        }));
                    }}
                    placeholder="请选择组织信息"
                    rules={[{required: !access.isCustom, message: '请选择组织信息'}]}
                    hidden={access.isCustom}
                />

                <ProFormText
                    name="account"
                    label="账号"
                    width="md"
                    rules={[
                        {
                            required: true,
                            message: '请输入账号信息！',
                        },
                    ]}
                />
                <ProFormText
                    name="password"
                    label="密码"
                    width="md"
                    rules={[
                        {
                            required: true,
                            message: '请输入密码！',
                        },
                    ]}
                />
                <ProFormText
                    name="username"
                    label="显示名"
                    width="md"
                />

                <ProFormText
                    name="phone"
                    width="md"
                    label="手机号"
                    placeholder="请输入联系人手机号"
                    rules={[
                        {
                            required: true,
                            message: '请输入正确的手机号!',
                            len: 11,
                            pattern: /^1\d{10}$/,
                        },
                    ]}
                />
                <ProFormText
                    name="email"
                    width="md"
                    label="邮箱"
                    placeholder="请输入邮箱地址"
                    rules={[
                        {
                            required: true,
                            message: '请输入正确的邮箱地址！',
                            pattern: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/,
                        },
                    ]}
                />
                <ProFormSelect
                    label="角色"
                    name="authorityId"
                    style={{width: 200}}
                    request={async () => {
                        const res = await authorityList({organizationId: ""});
                        return res.data.map((item) => ({
                            label: item.authorityName,
                            value: item.authorityId,
                        }));
                    }}
                    placeholder="请选择角色"
                    rules={[{required: true, message: '请选择角色'}]}
                />
            </StepsForm.StepForm>
            <StepsForm.StepForm
                title="远程登录配置"
            >
                <ProFormText
                    name="homePath"
                    width="md"
                    label="Home目录"
                    initialValue={formRef?.current?.getFieldValue('account')}
                />
                <ProFormText
                    name="loginShell"
                    width="md"
                    label="Login Shell"
                    initialValue={"/bin/bash"}
                />
            </StepsForm.StepForm>
        </StepsForm>
    );
};

export default AddForm;
